<script setup lang="ts">
import { useTransition, TransitionPresets } from "@vueuse/core";

defineOptions({
  // eslint-disable-next-line
  name: "Dashboard",
  inheritAttrs: false,
});

//消息数
const messageCount = ref(0);
const messageCountOutput = useTransition(messageCount, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
});
messageCount.value = 2000;
</script>

<template>
  <div class="dashboard-container">
    <!-- 数据卡片 -->
    <el-row :gutter="20" class="mb-[20px] h-[200px]">
      <el-col :span="6" class="h-full">
        <el-card class="box-card h-full">
          <div class="p-3 rounded">
            <svg-icon icon-class="message" size="3em" />
          </div>
          <div class="flex flex-col space-y-3">
            <div class="text-[var(--el-text-color-secondary)]">数据****</div>
            <div class="text-lg text-right">
              {{ Math.round(messageCountOutput) }}
            </div>
          </div>
        </el-card>
      </el-col>

      <!--消息数-->
      <el-col :span="6" class="h-full">
        <el-card class="box-card h-full" />
      </el-col>

      <el-col :span="6" class="h-full">
        <el-card class="box-card h-full" />
      </el-col>
      <el-col :span="6" class="h-full">
        <el-card class="box-card h-full" />
      </el-col>
    </el-row>

    <!-- Echarts 图表 -->
    <el-row :gutter="20" class="mb-[20px]">
      <el-col :span="6">
        <BarChart
          id="barChart"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :span="12">
        <PieChart
          id="pieChart"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>

      <el-col :span="6">
        <RadarChart
          id="radarChart"
          height="200px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
        />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mb-[20px]">
      <el-col :span="6">
        <BarChart id="barChart1" height="200px" width="100%" />
      </el-col>

      <el-col :span="12">
        <PieChart id="pieChart1" height="200px" width="100%" />
      </el-col>

      <el-col :span="6">
        <RadarChart id="radarChart1" height="200px" width="100%" />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 12px;

  .user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .el-card {
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-light);
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    .el-card__body {
      height: 100%;
    }
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
